<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ color: 'black', background: '#F4F6F5' }"
    >
      <el-table-column type="index"  label="序号"> </el-table-column>
      <el-table-column prop="name" label="接口名称"  align="center">
      </el-table-column>
      <el-table-column prop="address" label="备注" align="center">
      </el-table-column>
      <el-table-column prop="state" label="接口状态"  align="center">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.$index)" type="text" size="small" style="color: #FB9678;"
            >删除</el-button
          >
          <el-button
            @click="handleClicke(scope.row, scope.$index)"
            type="text"
            size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button type="primary" class="buttAu" @click="dialogFormVisiblee()"
      >添加</el-button
    >
    <el-dialog title="添加信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="接口名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口状态" :label-width="formLabelWidth">
          <el-select v-model="form.state" placeholder="状态">
            <el-option label="使用中" value="使用中"></el-option>
            <el-option label="未使用" value="未使用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibles()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="添加信息" :visible.sync="dialogFormVisiblea" width="30%">
      <el-form :model="form2">
        <el-form-item label="接口名称" :label-width="formLabelWidth">
          <el-input v-model="form2.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form2.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口状态" :label-width="formLabelWidth">
          <el-select v-model="form2.state" placeholder="状态">
            <el-option label="使用中" value="使用中"></el-option>
            <el-option label="未使用" value="未使用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisiblea = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibless()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="size"
      :current-page="page"
      @current-change="change"
      :total="mkep.length"
    >
    </el-pagination>
    1111
  </div>
</template>

<script>
export default {
  data() {
    return {
      rowl: "",
      dialogFormVisible: false,
      dialogFormVisiblea: false,
      bumt: {},
      mkep: [
        {
          name: "全息字典接口",
          address: "58同城接口",
          state: "使用中",
        },
        {
          name: "全息字典接口",
          address: "58同城接口",
          state: "使用中",
        },
        {
          name: "全息字典接口",
          address: "链家同城接口",
          state: "未使用",
        },
        {
          name: "全息字典接口",
          address: "贝壳同城接口",
          state: "使用中",
        },
        {
          name: "全息字典接口",
          address: "房天下同城接口",
          state: "使用中",
        },
        {
          name: "全息字典接口",
          address: "58同城接口",
          state: "使用中",
        },
        {
          name: "全息字典接口",
          address: "58同城接口",
          state: "使用中",
        },
        {
          name: "全息字典接口",
          address: "58同城接口",
          state: "使用中",
        },
      ],
      page: 1,
      size: 5,
      tableData: [],

      form: {
        name: "全息字典接口",
        state: "使用中",
        address: "58同城接口",
      },
      formLabelWidth: "100px",
      form2: {
        name: "",
        state: "",
        address: "",
      },
      formLabelWidth: "100px",
    };
  },

  methods: {
    handleClick(index2) {
      this.tableData = this.tableData.filter(function (item, index) {
        return index != index2;
      });
    },
    dialogFormVisiblee() {
      this.dialogFormVisible = true;
    },
    change(pagenaw) {
      this.page = pagenaw;
      this.tableData = this.mkep.slice(
        this.page * this.size - this.size,
        this.page * this.size
      );
    },
    dialogFormVisibles() {
      this.bumt = {
        name: this.form.name,
        address: this.form.address,
        state: this.form.state,
      };
      this.mkep.push(this.bumt);
      
      this.dialogFormVisible = false;
      this.form.name = "全息字典接口";
      this.form.address = "58同城接口";
      this.form.state = "使用中";
      this.baby()
    },
    handleClicke(row) {
      this.dialogFormVisiblea = true;

      this.form2.name = row.name;
      this.form2.address = row.address;
      this.form2.state = row.state;
      this.rowl = row;
    },
    dialogFormVisibless() {
      this.rowl.name = this.form2.name;
      this.rowl.address = this.form2.address;
      this.rowl.state = this.form2.state;
      this.dialogFormVisiblea = false;
    },
    baby(){
      
      this.tableData = this.mkep.slice(
      this.page * this.size - this.size,
      this.page * this.size
    );
    }
  },
  created() {
    this.tableData = this.mkep.slice(
      this.page * this.size - this.size,
      this.page * this.size
    );
  },
};
</script>
<style scoped >
.buttAu {
  float: right;
  margin-right: 50px;
}
</style>